<template>
  <div class="navigation-bar-2">
    <div class="navigation-bar-2-title">
      <div class="navigation-bar-2-title-big">快知</div>
      <div class="navigation-bar-2-title-small">Quick knowledge</div>
    </div>
    <div class="navigation-bar-2-solid"></div>
    <div class="navigation-bar-2-sort">
      <div 
        v-for="item in categoryItems" 
        :key="item.name"
        :style="{ marginLeft: item.indent ? '12px' : '0' }"
        @click="goToCategory(item.name)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavigationBar2',
  components: {},
  data() {
    return {
      categoryItems: [
        { name: '国内', indent: true },
        { name: '国际', indent: false },
        { name: '娱乐', indent: false },
        { name: '军事', indent: false },
        { name: '科技', indent: false },
        { name: '游戏', indent: false },
        { name: '数码', indent: false },
        { name: '航空', indent: false },
        { name: '教育', indent: false },
        { name: '更多类别', indent: false }
      ]
    }
  },
  methods: {
    goToCategory(selectedItem) {
      if (selectedItem == '更多类别') {
        try {
          this.$router.replace({
            name: 'category',
            params: { selectedItem: '全部' },
          });
        } catch (err) {
          if (err.name !== 'NavigationDuplicated') {
            console.error('导航失败:', err);
          }
        }
        return
      }
      
      try {
        this.$router.replace({
          name: 'category',
          params: { selectedItem },
        });
      } catch (err) {
        if (err.name !== 'NavigationDuplicated') {
          console.error('导航失败:', err);
        }
      }
    },
  }
}
</script>

<style scoped>
.navigation-bar-2 {
  width: 1150px;
  height: 80px;
  margin-top: 30px;
}
.navigation-bar-2-title {
  width: 100%;
  height: 60%;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center; 
}
.navigation-bar-2-title-big {
  color: #ff4d4f;
  font-size: 25px;
  font-weight: bolder; 
  margin-left: 12px;
}
.navigation-bar-2-title-small {
  font-size: 12px;
  color: rgba(178, 178, 178, 1);
  position: absolute;
  top: 23px;
  left: 64px;
}
.navigation-bar-2-solid {
  width: 100%;
  height: 1.5%;
  background-color: #ff4d4f;
}
.navigation-bar-2-sort {
  width: 100%;
  height: 38.5%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}
.navigation-bar-2-sort div:hover {
  color: #ff4d4f;
  cursor: pointer;
}
</style>    